@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
}
.j-container{
	height:100%;
	width: 87%;
	margin: auto;
}
.container-fluid .j-container h5 {
	color: skyblue;
}
.container-fluid test .j-container h5 {
	color: skyblue;
}
.app-display-none{
	display: block;
}
.app-display-block{
	display: none;
}
.bg-style{
	background-color: rgba(84,255,200,1.00)
}
/*-----------*/
.j-nav{
	width: 100%;
	height: 60px;
	background-color: rgba(246,246,246,1.00);
	border-bottom: rgba(147,147,147,.5) solid 1px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	
}
.logoimg{
	height: 100%;
	float: left
}
.nav-list{
	float: left;
	height: 100%
}
.nav-list>a{
	float: left;
	padding: 17px 25px;
	height: 100%;
	cursor: pointer;
	text-decoration: none
}
.nav-list>a:hover{
	background-color: #E1E1E1
}
.nav-list>a>span{
	color: rgba(55,55,55,1.00);
	text-decoration: none
}
.userinfo{
	height: 100%;
	float: right;
	margin:17px 0;
	color: rgba(95,95,95,1.00);
	cursor: pointer
}

.username{
	float: left;
}

.banner-box{
	width: 90%;
	height: 400px;
	margin: 50px auto;
	border-radius: 20px;
	box-shadow: 1px 5px 10px 0 #aaa;
}
.banner-box:hover{
	transition: .5s;
	box-shadow: 1px 10px 10px 0 #aaa;
}
.course-list{
	width: 35%;
	background-color: rgba(0,0,0,.8);
	height: 100%;
	border-radius: 20px 0 0 20px;
	display: block;
	float: left
}
.course-list>ul{
	height: 85%;
	padding: 20px;
	overflow: auto;
	scrollbar-width:none
}
.course-list>ul>li:hover {
	background-color: orange;
}
.course-list>ul>li{

	color: white;
	font-size: 1rem;
	padding: 15px 0;
	
}
.course-list>ul>li>span{
	float: right;
	cursor: pointer
}
.banner{
	position: relative;
	width: 65%;
	height: 100%;
	float: left;
	overflow: hidden;
	border-radius: 0 20px 20px 0;
}
.banner-con{
	width: 400%;
	height: 100%;
	position: relative;
	left: 0;
}
.banner-con>div{
	width: 25%;
	height: 100%;
	float: left;
}
.banner-con>div>img{
	object-fit: cover
}
.banner-test{
	width: 100%;
	height: 100%;
}
.banner-btn{
	position: absolute;
	top: 45%;
	width: 50px;
	height: 50px;
	background-color: rgba(0,0,0,.5);
	border-radius: 50%
}
.pre{
	left: 10px;
}
.next{
	right: 10px
}
.card-box{
	width: 190px;
/*	height: 200px;*/
	cursor: pointer;
	margin:  10px;
}
.card-box>p{
	font-size: .8rem
}
.card-box:hover .card-img{
	transform: scale(1.1);
	transition: .3s
}
@media screen and (max-width: 770px) {
	.j-container{
		width: 97%
	}
	.app-display-none{
		display: none;
	}
	.app-display-block{
		display: block;
	}
	.course-list{
		display: none
	}
	/*-----*/
	.app-nav{
		width: 200px;
		height: 93%;
		position: fixed;
		top: 60px;
		left: -200px;
		background-color: rgba(246,246,246,1.00);
		z-index: 10;
		box-shadow: 5px 0 10px #ccc;
		
	}
	.app-nav-list>li{
		list-style: none;
		padding: 15px 20px;
		font-size: .8rem;
		
	}
	.app-nav-list>li>a{
		color: rgba(55,55,55,1.00);
		text-decoration: none
	}
	.course-list{
		position: fixed;
		bottom: 10%;
		right: 0;
		width: 250px;
		background-color: rgba(38,38,38,1.00);
		height: 60%;
		border-radius: 10px;
		z-index: 10;
	}
	.course-list>ul{
		height: 85%;
		padding: 20px;
		overflow: auto;
		scrollbar-width:none;
		z-index: 1
	}
	.course-list>ul>li{
		color: white;
		font-size: 1rem;
		padding: 15px 0;

	}
	.course-list>ul>li>span{
		float: right;
		cursor: pointer
	}
	.banner{
		width: 100%;
		height: auto;
	}
	.app-open-nav{
		width: 60px;
		height: 60px;
		float: right
	}
	.userinfo{
		float: none;
	}
	.banner-con>div{
		width: 25%;
		height: auto
	}
	.banner{
		border-radius: 20px
	}
	.banner-box{
		height: auto
	}
	.card-box{
		width: 200px;
		height: auto
	}
}
@media screen and (max-width: 1000px) and (min-width:770px) {
	.banner-box{
		height: 300px
	}
	.course-list>ul{
		height: 80%;
		padding: 20px;
		overflow: auto;
		scrollbar-width:none;
		z-index: 1
	}
	
}
@media screen and (max-width:480px) {
	.card-box{
		width: 90%;
		height: auto
	}
}